<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column
      :label="item.label"
      v-for="(item, index) in value"
      :key="index"
      :width="item.width"
    >
      <!-- :v-if="item.prop=='question'" :v-html="scope.row.answer" -->
      <template slot-scope="scope">
        <div v-if="item.prop == 'questionType'">
          {{ getQuestionType(scope.row[item.prop]) }}
        </div>
        <div v-else-if="item.prop == 'difficulty'">
          {{ getDifficulty(scope.row[item.prop]) }}
        </div>
        <div v-else-if="item.prop == 'addDate'">
          {{ getAddDate(scope.row[item.prop]) }}
        </div>
        <div v-else-if="item.prop == 'chkState'">
          {{ getchkType(scope.row[item.prop]) }}
        </div>
        <div v-else-if="item.prop == 'publishState'">
          {{ getPublishType(scope.row) }}
        </div>
        <div v-html="scope.row[item.prop]" v-else></div>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="180px"
      v-if="operation === 'questions'"
    >
      <template slot-scope="{ row }">
        <el-button
          type="primary"
          icon="el-icon-view"
          size="small"
          plain
          circle
          @click="$emit('previewShow', row)"
        ></el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          plain
          circle
          @click="$router.push(`new/${row.id}`)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="small"
          plain
          circle
          @click="remove(row)"
        ></el-button>
        <el-button
          type="warning"
          icon="el-icon-star-off"
          size="small"
          plain
          circle
          @click="choiceAdd(row)"
        ></el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      fixed="right"
      width="200px"
      v-if="operation === 'choice'"
    >
      <template slot-scope="{ row }">
        <el-button type="text" size="small" @click="$emit('previewShow', row)"
          >预览</el-button
        >
        <el-button
          type="text"
          size="small"
          :disabled="row.chkState != 0"
          @click="$emit('toExamineShow', row)"
          >审核</el-button
        >
        <el-button
          type="text"
          size="small"
          :disabled="row.publishState == 1"
          @click="$router.push(`new/${row.id}`)"
          >修改</el-button
        >
        <el-button type="text" size="small" @click="choicePublish(row)">{{
          row.publishState == 1 ? "下架" : "上架"
        }}</el-button>
        <el-button
          type="text"
          size="small"
          @click="remove(row)"
          :disabled="row.publishState == 1"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import dayjs from 'dayjs'
import { remove, choiceAdd, choicePublish } from '@/api/hmmm/questions'// 基础题库列表
import { difficulty, questionType, chkType } from '@/api/hmmm/constants.js'
export default {
  props: {
    value: {
      type: Array,
      required: true
    },
    list: {
      type: Array,
      required: true
    },
    operation: {
      type: String,
      required: true
    }
  },
  computed: {
    getQuestionType () {
      return (value) => {
        value = value * 1
        let val = null
        questionType.forEach((item, index) => {
          if (item.value === value) {
            val = item.label
          }
        })
        return val
      }
    },
    getDifficulty () {
      return (value) => {
        value = value * 1
        let val = null
        difficulty.forEach((item, index) => {
          if (item.value === value) {
            val = item.label
          }
        })
        return val
      }
    },
    getAddDate () {
      return (date) => {
        return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    getchkType () {
      return (value) => {
        value = value * 1 + 1
        let val = null
        chkType.forEach((item, index) => {
          if (item.value === value) {
            val = item.label
          }
        })
        return val
      }
    },
    getPublishType () {
      return (item) => {
        if (item.chkState * 1 === 0 || item.chkState * 1 === 2) {
          return '待发布'
        } else if (item.chkState * 1 === 1 && item.publishState * 1 === 1) {
          return '已发布'
        } else {
          return '下架'
        }
      }
    }

  },
  methods: {
    remove (data) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data).then(() => {
          this.$message.success('删除成功')
          this.$emit('render')
        }).catch(() => {
          this.$message.warning('删除失败，请重试')
        })
      }).catch(() => {})
    },
    choiceAdd (data) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data.choiceState = 1
        return choiceAdd(data)
      }).then(() => {
        this.$message.success('加入精选成功')
        this.$emit('render')
      }).catch(() => {})
    },
    choicePublish (data) {
      const str = data.publishState * 1 !== 1 ? '上架' : '下架'
      this.$confirm(`您确认${str}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        data.publishState * 1 !== 1 ? data.publishState = 1 : data.publishState = 0
        await choicePublish(data).then(() => {
          data.publishState * 1 !== 1 ? this.$message.success('下架成功') : this.$message.success('上架成功')
          this.$emit('render')
        }).catch(() => {
          this.$message.warning('下架失败，请重试')
        })
      }).catch(() => {})
    }
  }
}

</script>

<style>
</style>
